<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS024-元素滚动事件</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: #222;
        color: snow;
    }

    .container {
        display: inline-flex;
        flex-direction: column;
        gap: 1rem;
        width: 40rem;
        height: 100rem;
        margin: 1rem;
        padding: 1rem;
        border: 1px solid snow;
    }

    .scroll-box {
        width: 30rem;
        height: 10rem;
        overflow-y: scroll;
        border: 1px solid snow;

        p {
            text-wrap: nowrap;
        }
    }

    .scroll-html {
        position: fixed;
        bottom: 2rem;
        left: 2rem;
        background-color: rgba(255, 255, 255, .2);
    }

    .return-top {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        width: 3.5rem;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, .2);
        border: 1px solid snow;
        font-size: 1rem;
        color: snow;
        cursor: pointer;
        visibility: hidden;
    }
</style>

<body>
<div class="container">
    <div class="scroll-box">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra tincidunt nulla eget tempus.
            Integer et velit nibh. Vivamus ipsum lacus, scelerisque quis sollicitudin id, tincidunt ac urna.</p>
        <p>Duis sed metus mi. Sed nec lectus vitae risus sollicitudin tempor. Donec luctus quis risus non pharetra.
            Nulla consequat diam in nibh imperdiet, eget lobortis elit fermentum.</p>
        <p>Curabitur sollicitudin mi nisl, id laoreet orci faucibus vel. Morbi fermentum vel neque a congue. Nulla
            rhoncus hendrerit dapibus. Quisque dignissim maximus nunc ut aliquet.</p>
        <p>Aenean venenatis congue elit vel consequat. Praesent tempor lorem sit amet finibus dictum. Donec nec
            hendrerit justo. Integer vehicula orci at lorem porta sollicitudin.</p>
        <p>Mauris vulputate massa in eleifend blandit. Aliquam tincidunt, nunc quis tristique tincidunt, ligula lorem
            ullamcorper nisl, vitae lobortis ante urna sed purus.</p>
        <p>Quisque egestas, turpis a malesuada feugiat, leo dui mattis augue, at viverra ante velit sed mauris. Fusce
            cursus dui vel orci tincidunt cursus. Cras elementum id neque id tempus.</p>
        <p>Proin pretium varius magna, sit amet sagittis velit fermentum condimentum. Aliquam convallis tortor massa,
            id aliquam leo tempor eget. Sed cursus justo nec arcu convallis placerat.</p>
        <p>Nulla suscipit varius tellus id ornare. Nunc lobortis non magna a egestas. Fusce ultrices, felis ac
            condimentum venenatis, arcu justo facilisis libero, ac pulvinar quam eros vulputate quam.</p>
        <p>Aliquam ultrices, neque sit amet dapibus porta, est magna cursus eros, vel fringilla enim urna nec sapien.
            Fusce sit amet dignissim ex, a volutpat augue.</p>
        <p>Proin posuere sodales felis sit amet suscipit. Morbi et diam id orci lobortis convallis. Integer ac lacus
            sed dui ornare pulvinar. Integer egestas augue sit.</p>
        <p>Nulla felis tortor, vehicula sed risus eu, feugiat tempor leo. In nec fermentum orci, at efficitur enim.
            Nunc vitae mollis eros. Praesent facilisis odio vestibulum.</p>
        <p>Nulla auctor, enim et tincidunt dignissim, ex diam pretium leo, ac scelerisque turpis tellus vitae nisi.
            Quisque mattis ut lectus ut iaculis. Aenean dictum tellus.</p>
    </div>
    <div class="scroll-box-info">
        <p>scrolled distance:</p>
        <p>scrollTop=<span class="scroll-top">0</span></p>
        <p>scrollLeft=<span class="scroll-left">0</span></p>
    </div>
</div>
<div class="scroll-html">
    <p>html scrolled distance:</p>
    <p>scrollTop=<span class="scroll-top">0</span></p>
    <p>scrollLeft=<span class="scroll-left">0</span></p>
</div>
<button class="return-top">Top</button>

<script>
    const scrollBox = document.querySelector('.scroll-box');
    const scrollTopText = document.querySelector('.scroll-box-info .scroll-top');
    const scrollLeftText = document.querySelector('.scroll-box-info .scroll-left');
    const scrollHtmlTopText = document.querySelector('.scroll-html .scroll-top');
    const scrollHtmlLeftText = document.querySelector('.scroll-html .scroll-left');
    const returnTopBtn = document.querySelector('.return-top');

    scrollBox.addEventListener('scroll', function () {
        scrollTopText.innerText = this.scrollTop;
        scrollLeftText.innerText = this.scrollLeft;
    });

    window.addEventListener('scroll', function () {
        const top = document.documentElement.scrollTop;
        const left = document.documentElement.scrollLeft;
        returnTopBtn.style.visibility = top > 200 ? 'visible' : 'hidden';
        scrollHtmlTopText.innerText = top;
        scrollHtmlLeftText.innerText = left;
    });

    returnTopBtn.addEventListener('click', function () {
        // document.documentElement.scrollTop = 0;
        window.scrollTo(0, 0);
    });
</script>
</body>

</html>